import ItemBlock from "../components/item-block";
import "./left.scss";
import titleIcon from "@/assets/images/dashboard/icon-10.png";
import appIcon from "@/assets/images/dashboard/icon-4.png";
import videoIcon from "@/assets/images/dashboard/icon-9.png";
import moreIcon from "@/assets/images/dashboard/icon-1.png";
import { getAppletList } from "@/api/modules/applet/mallApplet";
import { ElMessage } from "element-plus";
import { useApplet } from "@/hooks/useApplet";
import { gotoPage } from "@/utils/routerUtil";
import { RouterPath } from "@/enums/routerPath";
import { computed, ComponentInternalInstance, getCurrentInstance } from "vue";
export default defineComponent({
	emits: [],
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const { gotoAccess } = useApplet();
		// const data = reactive({
		// 	list: [] as any,
		// 	tableList: [
		// 		{ key: "scada", label: proxy?.$t("index.applet_list_lable.scada"), img: appIcon },
		// 		{ key: "vms", label: proxy?.$t("index.applet_list_lable.vms"), img: videoIcon },
		// 		{ key: "more", label: proxy?.$t("index.applet_list_lable.more"), img: moreIcon }
		// 	] as any
		// });
		// 使用计算属性才能让数据跟随国际化变化
		const data = computed(() => {
			return {
				list: [] as any,
				tableList: [
					{ key: "scada", label: proxy?.$t("index.applet_list_lable.scada"), img: appIcon },
					{ key: "vms", label: proxy?.$t("index.applet_list_lable.vms"), img: videoIcon },
					{ key: "more", label: proxy?.$t("index.applet_list_lable.more"), img: moreIcon }
				] as any
			};
		});
		// 点击事件
		const lckFun = (key?: string) => {
			if (key != "more") {
				const info = data.value.list.filter((item: any) => item.key == key)[0];
				if (info) {
					gotoAccess(info);
				} else {
					ElMessage.warning(proxy?.$t("index.applet_list.elmsg"));
				}
			} else {
				gotoPage(RouterPath.applet, {});
			}
		};
		// 获取所有应用
		const getList = () => {
			getAppletList({
				pageSize: 9999
			}).then((res: any) => {
				if (res.code == 200 && res.result && res.result.records) {
					data.value.list = res.result.records || [];
				}
			});
		};
		getList();
		return () => {
			return (
				<ItemBlock title={proxy?.$t("index.applet_list.title")} class="applet">
					{{
						titleIcon: () => {
							return <el-image src={titleIcon} fil="cover" />;
						},
						default: () => {
							return (
								<div class="flex justify-between applet-list">
									{data.value.tableList.map((item: any) => {
										return h(
											<div
												class="item"
												onClick={() => {
													lckFun(item.key);
												}}
											>
												<div class="icon">
													<el-image src={item.img} fil="cover"></el-image>
												</div>
												<div class="text">{item.label}</div>
											</div>
										);
									})}
								</div>
							);
						}
					}}
				</ItemBlock>
			);
		};
	}
});
